import React, { JSX } from 'react';
import { NulDialog, NulCommonOperations, NulFormItem } from '../../components/NulDialog';
import '@fontsource/open-sans';
import { TextField } from '@mui/material';
import { useAppDispatch } from '../../actions/hook';
import { createNewCommodity } from '../../actions/CommodityManagement';


interface CreateCommodityProps {
  open: boolean;
  onClose: () => void;
}

function CreateCommodity(props: CreateCommodityProps): JSX.Element {
  const { open, onClose } = props;

  const [name, setName] = React.useState<string>('');
  const [wholesalePrice, setWholesalePrice] = React.useState<string>('');
  const [retailPrice, setRetailPrice] = React.useState<string>('');
  const [costPrice, setCostPrice] = React.useState<string>('');
  const [notes, setNotes] = React.useState<string>('');
  const [wholesaleError, setWholesaleError] = React.useState<boolean>(false);
  const [retailError, setRetailError] = React.useState<boolean>(false);
  const [costError, setCostError] = React.useState<boolean>(false);

  const dispatch = useAppDispatch();

  const clear = () => {
    setName('');
    setWholesalePrice('');
    setRetailPrice('');
    setCostPrice('');
    setNotes('');
    setWholesaleError(false);
    setCostError(false);
    setRetailError(false);
  }

  const onCreateClicked = () => {
    const numberPattern: RegExp = /^(\d+(\.\d{0,2})?)|(\.\d{1,2})$/;
    let syntax = true;
    if (!wholesalePrice.match(numberPattern)) {
      setWholesaleError(true);
      syntax = false;
    }
    if (!retailPrice.match(numberPattern)) {
      setRetailError(true);
      syntax = false;
    }
    if (!costPrice.match(numberPattern)) {
      setCostError(true);
      syntax = false;
    }
    if (!syntax) {
      return;
    }

    dispatch(createNewCommodity({
      name,
      wholesalePrice: parseFloat(wholesalePrice),
      retailPrice: parseFloat(retailPrice),
      costPrice: parseFloat(costPrice),
      notes
    }));

    onClose();
    clear();
  };

  return (
    <NulDialog
      open={open}
      onClose={onClose}
      title='Create New Commodity'
      operations={
        <NulCommonOperations
          onPositiveClicked={onCreateClicked}
          onNegativeClicked={onClose}
          positiveText='Create'
        />
      }
    >
      <NulFormItem hint='Name' component={
        <TextField placeholder='Name' fullWidth={true} size='small' value={name} onChange={(event) => { setName(event.target.value); }} />
      } />
      <NulFormItem hint='Wholesale Price' component={
        <TextField placeholder='Wholesale Price' fullWidth={true} size='small' error={wholesaleError} value={wholesalePrice} onChange={(event) => { setWholesalePrice(event.target.value); }} />
      } />
      <NulFormItem hint='Retail Price' component={
        <TextField placeholder='Retail Price' fullWidth={true} size='small' error={retailError} value={retailPrice} onChange={(event) => { setRetailPrice(event.target.value); }} />
      } />
      <NulFormItem hint='Cost Price' component={
        <TextField placeholder='Cost Price' fullWidth={true} size='small' error={costError} value={costPrice} onChange={(event) => { setCostPrice(event.target.value); }} />
      } />
      <NulFormItem necessary={false} hint='Notes' component={
        <TextField placeholder='Notes' fullWidth={true} size='small' value={notes} onChange={(event) => { setNotes(event.target.value); }} />
      } />
    </NulDialog>
  )
}

export { CreateCommodity };